<template>
  <div>
    <el-drawer
      :with-header="false"
      size="75%"
      v-bind="$attrs"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
    >
      <div style="padding: 24px 24px 30px 24px">
        <el-descriptions style="margin-bottom: 12px"
                         direction="vertical"
                         :title="data.visitSn"
                         :column="5" size="medium"
        >
          <template slot="extra">
            <el-button type="warning" size="small" @click="updateHandler(data.id)">
              <i class="el-icon-edit"/> 编辑
            </el-button>
            <el-dropdown style="margin-left: 12px">
              <el-button size="small">
                <i class="el-icon-more"/>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="deleteHandler(data.id)">
                  <i class="el-icon-user"> 移除</i>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <el-descriptions-item label="客户姓名">{{ data.customerName }}</el-descriptions-item>
          <el-descriptions-item label="回访时间">{{ data.visitTime }}</el-descriptions-item>
          <el-descriptions-item label="回访人">{{ data.ownerUserName }}</el-descriptions-item>
          <el-descriptions-item label="回访形式">
            <dict-tag :options="dict.type.crm_return_visit_type" :value="data.returnVisitTypeId"/>
          </el-descriptions-item>
        </el-descriptions>
        <el-tabs v-model="activeName" @tab-click="tabClick">
          <el-tab-pane label="详细资料" name="detailInfo">
            <el-descriptions title="基本信息" :column="2">
              <el-descriptions-item label="回访编号">{{ data.visitSn }}</el-descriptions-item>
              <el-descriptions-item label="回访时间">{{ data.visitTime }}</el-descriptions-item>
              <el-descriptions-item label="回访人">{{ data.ownerUserName }}</el-descriptions-item>
              <el-descriptions-item label="回访形式">
                <dict-tag :options="dict.type.crm_return_visit_type" :value="data.returnVisitTypeId"
                />
              </el-descriptions-item>
              <el-descriptions-item label="客户名称">{{ data.customerName }}</el-descriptions-item>
              <el-descriptions-item label="联系人">{{ data.contactsName }}</el-descriptions-item>
              <el-descriptions-item label="合同编号">{{ data.contractSn }}</el-descriptions-item>
              <el-descriptions-item label="客户满意度">
                <dict-tag :options="dict.type.crm_satisfaction" :value="data.satisfactionId"/>
              </el-descriptions-item>
              <el-descriptions-item label="客户反馈">{{ data.feedback }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="系统信息" :column="2" style="margin-top: 20px">
              <el-descriptions-item label="创建人">{{ data.createUserName }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ data.createTime }}</el-descriptions-item>
              <el-descriptions-item label="更新时间">{{ data.updateTime }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="附件" name="file">
            <file-drawer-table :file-list="drawerTableData" :loading="drawerTableLoading" v-if="activeName == 'file'"/>
          </el-tab-pane>
          <el-tab-pane label="操作记录" name="records">
            <crm-records :activity-list="drawerTableData" v-if="activeName == 'records'"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <!-- 对话框 -->
    <visit-dialog :visible.sync="dialogVisible" :pk="pk"/>
  </div>
</template>

<script>
import {
  deleteBatchByIds,
  selectByPrimaryKey
} from '@/api/crm/Visit'
import { listActionRecord } from '@/api/crm/ActionRecord'

import Comment from '@/components/CrmEdit/Index'
import VisitDialog from './Create'
import FileDrawerTable from '@/components/Crm/File/DrawerTable'
import CrmRecords from '@/components/CrmRecords/Index'

export default {
  inheritAttrs: false,
  name: 'VisitDrawer',
  components: {
    VisitDialog,
    Comment,
    FileDrawerTable,
    CrmRecords
  },
  dicts: ['crm_return_visit_type', 'crm_satisfaction'],
  props: {
    pk: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      dialogVisible: false, // 对话框懒加载
      drawerTableData: [], // 表格数据
      drawerTableLoading: false, // 表格加载状态
      activeName: 'detailInfo', // 标签页标志
      data: {
        visitSn: ''
      } // 对象数据
    }
  },
  // 在实例创建完成后被立即调用
  created() {

  },
  // 实例被挂在后调用
  mounted() {

  },
  // 方法
  methods: {
    // 抽屉打开方法
    onOpen() {
      if (this.pk != null) {
        selectByPrimaryKey(this.pk).then(res => {
          this.data = res.data
        })
      }
    },
    // 抽屉关闭回调
    onClose() {
      this.activeName = 'detailInfo'
      this.data = {
        visitSn: ''
      }
      this.$emit('update:visible', false)
    },
    // 编辑按钮点击事件
    updateHandler(id) {
      this.pk = id
      this.dialogVisible = true
    },
    // 删除按钮点击事件
    deleteHandler(id) {
      this.$modal.confirm('是否确认移除当前数据').then(() => {
        return deleteBatchByIds(id)
      }).then(() => {
        this.$emit('ok')
        this.onClose()
        this.$modal.msgSuccess('移除成功')
      }).catch(() => {
      })
    },
    // 标签页切换
    tabClick({ name }) {
      // 重置数据
      this.drawerTableLoading = true
      this.drawerTableData = []
      if (name == 'file') {
        // 查询附件列表
        setTimeout(() => {
          this.drawerTableLoading = false
        }, 500)
      } else if (name == 'records') {
        listActionRecord(8, this.data.id).then(res => {
          this.drawerTableData = res.data
        })
      }
    }
  }
}
</script>

<style>
.el-descriptions__title {
  font-size: 20px;
  font-weight: bold;
}

.el-descriptions-item__container {
  font-size: 16px !important;
}
</style>
